<template>
    <div class="nav-bar van-hairline--top"    >
        <ul class="nav-list">
            <router-link to="home" class="nav-list-item active" >
                <i><van-icon name="wap-home-o" /></i>
                <span>首页</span>
            </router-link>
            <router-link to="category" class="nav-list-item">
                <i><van-icon name="hot-o" /></i>
                <span>分类</span>
            </router-link>
            <router-link to="cart" class="nav-list-item">
                <i><van-icon name="shopping-cart-o" :badge="!store.state.count?'':store.state.count"/></i>
                <span>购物车</span>
            </router-link>
            <router-link to="user" class="nav-list-item">
                <i><van-icon name="manager-o" /></i>
                <span>我的</span>
            </router-link>
        </ul>
    </div>
</template>

<script setup>
import { onMounted } from 'vue'
import {useStore} from 'vuex'
import { getLocal } from '@/common/js/utils'
import { useRoute } from 'vue-router'
const store = useStore()
const route = useRoute()
onMounted(()=>{
    const token = getLocal('token')
    const path = route.path
    if(token && !['/home','/category'].includes(path)) {
        store.commit('updateCart')
    }
})
</script>

<style lang="less" scoped>
@import '../common/style/mixin.less';
.nav-bar {
    position: fixed;
    left: 0;
    bottom:0;
    width: 100%;
    z-index: 9999;
    background: #fff;
    padding:5px 0;
    .nav-list {
        width:100%;
        .fj();
        flex-direction: row;
        .nav-list-item {
            display: flex;
            flex: 1;
            flex-direction: column;
            text-align: center;
            font-size: 22px;
            span {
                font-size: 12px;
            }
            &.router-link-active {
                color:@primary;
            }
        }
        // .active {
        //     color:@primary
        // }
    }
}
</style>